<template>
  <div>
    <el-dialog
      title="巡视工单"
      :visible.sync="dialogVisible"
      @close="quxiao()"
      width="48%"
    >
      <div>
        <!-- 步骤条 -->
        <div class="buzhou">
          <el-steps :active="active" finish-status="success">
            <el-step title="编制"></el-step>
            <el-step title="执行"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
        </div>
        <!-- form表单 -->
        <div class="form">
          <div style="margin-bottom: 15px; font-size: 18px">巡视信息</div>
          <div>
            <el-form
              :model="form"
              label-position="left"
              label-width="110px"
              :disabled="isshow"
              ref="formrefs"
              :rules="rules"
            >
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="业务类型">
                    <el-select v-model="form.businessType" style="width: 100%;" size="small">
                      <el-option
                        v-for="(item, index) in yewulist"
                        :key="index"
                        :label="item.text"
                        :value="item.value"
                        class="option"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="任务单编号">
                    <el-input
                      placeholder="自动生成"
                      v-model="form.taskNo"
                      size="small"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="巡视类型">
                    <el-radio-group v-model="form.tourType" disabled>
                      <el-radio
                        v-for="item in xingzhilist"
                        :key="item.value"
                        :label="item.value"
                        >{{ item.text }}</el-radio
                      >
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="用电企业 " prop="orgNo">
                    <el-select
                      v-model="form.orgNo"
                      filterable
                      size="small"
                      ref="qiye"
                      style="width: 100%;"
                      @change="cahngqiye"
                    >
                      <el-option
                        v-for="(item, index) in qiyelist"
                        :key="index"
                        :label="item.bizOrgName"
                        :value="item.bizOrgNo"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="地址">
                    <el-input
                      v-model="form.address"
                      size="small"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="联系人">
                    <el-input
                      v-model="form.contacts"
                      size="small"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系方式">
                    <el-input
                      v-model="form.contactsMobile"
                      size="small"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="巡视日期">
                    <el-date-picker
                      v-model="form.tourDate"
                      type="date"
                      style="width: 100%;"
                      value-format="yyyy-MM-dd"
                      size="small"
                      placeholder="选择日期">
                    </el-date-picker>
                    <!-- <el-input
                      v-model="form.tourDate"
                      size="small"
                      suffix-icon="el-icon-date"
                    ></el-input> -->
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="巡视人员" prop="xsfzrName">
                    <el-select
                      v-model="form.xsfzrName"
                      size="small"
                      style="width: 100%;"
                      ref="renyuan"
                    >
                      <el-option
                        class="option"
                        :label="form.xsfzrName"
                        value="value"
                      >
                        <el-tree
                          :props="propss"
                          :load="loadNodess"
                          lazy
                          @node-click="handleNode"
                          ref="tree"
                        >
                        </el-tree>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="巡视成员">
                    <el-select
                      v-model="formdata.treeData"
                      multiple
                      style="width: 100%;"
                      size="small"
                      @remove-tag="removetag"
                    >
                      <el-option
                        value="treeDataValue"
                        label="label"
                        style="height: auto"
                      >
                        <el-tree
                          ref="tree"
                          :props="propss"
                          :highlight-current="true"
                          @node-click="handleNodeClicks"
                          :load="loadNodess"
                          lazy
                        >
                          <template slot-scope="{ node, data }">
                            <span
                              :style="{
                                cursor: data.disabled ? 'no-drop' : 'pointer',
                                fontSize: '14px'
                              }"
                              >{{ node.label }}</span
                            >
                          </template>
                        </el-tree>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="巡视人联系方式">
                    <el-input
                      v-model="form.xsfzrMobile"
                      size="small"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- <el-row>
                    <el-col :span="12">
                      <el-form-item label="审核人">
                       <el-input v-model="form.shrName" size="small" style="width: 207px;"></el-input>
                     </el-form-item>
                    </el-col>
                  </el-row> -->
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="巡视内容概括" prop="tourContent">
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      v-model="form.tourContent"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <div
                  style="
                    border-top: 1px solid #ccc;
                    padding-top: 10px;
                    margin-top: 10px;
                  "
                >
                  <el-col :span="12">
                    <el-form-item label="填报人">
                      <el-input
                        v-model="form.tbrName"
                        size="small"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="填报日期">
                      <!-- <el-input
                        v-model="form.tbDate"
                        size="small"
                      ></el-input> -->
                        <el-date-picker
                        v-model="form.tbDate"
                        type="date"
                        style="width: 100%;"
                        value-format="yyyy-MM-dd"
                        size="small"
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </div>
              </el-row>
            </el-form>
          </div>
        </div>
        <!-- 盒子底部按钮 -->
        <div class="footer">
          <el-button @click="quxiao" size="small">取 消</el-button>
          <el-button v-if="!isshow" type="primary" @click="submit" size="small"
            >保存</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getuserlistapi } from '@/api/analysis'
import { getyewuleiapi } from '@/api/guidelines'
import {getTreeChildListApi} from '@/api/permissions'
import {
  getgengjiedianapi,
  getzhuzhijigouapi,
  getuserlistapis
} from '@/api/subscribe'
import {
  posttianbaoapi,
  postfasongapi,
  getuserloginapi,
  getxunuserapi,
  getchangzhanxinxiapi
} from '@/api/workorder'
export default {
  name: 'CallPoliceDiaLogkuang',
  props: {
    xingzhilist: {
      type: Array,
      default: () => []
    },
    yewulist: {
      type: Array,
      default: () => []
    },
    qiyelist: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        tourDate: '',
        xscyName: '',
        xscyId: '',
        xsfzrId: '',
        xsfzrName: '',
        tourType: '',
        orgName: '',
        tourContent: '临时巡视',
        // tourDate: '',
        // tbDate:''
      },
      active: 1,
      dialogVisible: false,
      propss: {
        label: 'orgName',
        disabled: 'disabled'
      },
      formdata: {
        treeData: [],
        treeidlist: []
      },
      tourType: '',
      isshow: false,
      testList: [],
      rules: {
        orgNo:[{ required: true, message: '请选择用电企业', trigger:'change' }],
        xsfzrName: [{ required: true, message: '请选择巡视人员', trigger: 'change' }],
        tourContent: [{ required: true, message: '请输入描述', trigger: 'blur' }],
      }
    }
  },

  async mounted() {},

  methods: {
    // 保存
    async submit() {
      await this.$refs.formrefs.validate()
      this.form.xscyId = this.formdata.treeidlist.join(',')
      this.form.xscyName = this.formdata.treeData.join(',')
      this.form.id
        ? await postfasongapi(this.form).then(res => {
          this.$message({
            type: res.code == '200' ? 'success' : 'waraing',
            message:res.code=='200'?'保存成功':res.message
          })
        })
        : await posttianbaoapi(this.form).then(res => {
          this.$message({
            type: res.code == '200' ? 'success' : 'waraing',
            message:res.code=='200'?'保存成功':res.message
          })
        })
      this.dialogVisible = false
      this.$emit('submit')
    },
    // 巡视人员组
    handleNodeClicks(data, node, nodeData) {
      if(!data.userName)return
      if (this.formdata.treeData.some((ele) => ele == data.orgName)) return
      this.formdata.treeData.push(data.orgName)
      this.formdata.treeidlist.push(data.userNo)
      this.testList.push({ name: data.orgName, id: data.userNo })
    },
    removetag(val) {
      this.testList = this.testList.filter((ele) => ele.name !== val)
      this.formdata.treeidlist = this.testList.map((item) => item.id)
    },
    //  获取当前时间错
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const month=mon<10?'0'+mon:mon
      this.$set(this.form,'tourDate', year + '-' + month + '-' + day)
      this.$set(this.form,'tbDate', year + '-' + month + '-' + day)
      // this.form.tourDate = year + '-' + month + '-' + day
      // this.form.tbDate = year + '-' + month + '-' + day
    },
    setnameapi(list) {
      const array = list.map(item => {
        return {
          orgName: item.orgName || item.bizOrgName||item.userName,
          ...item
        }
      })
      return array
    },
    // 巡视人员树懒加载
    async loadNodess(node, resolve) {
      if (node.level === 0) {
        const { data: { entity } } = await getgengjiedianapi()
        return resolve([entity])
      }
      if (node.level ==1) {
        const { data: { list: bumenlist } } = await getzhuzhijigouapi({ parentOrgNo: node.data.orgNo })
        const {data:{list:qiyelist}}=await getTreeChildListApi({parentOrgNo: node.data.orgNo})
        return resolve([...this.setnameapi(qiyelist),...this.setnameapi(bumenlist)])
      }
      if (node.level > 1) {
        if(node.data.userName) return resolve([])
        if (node.data.orgType == '60') {
           const {data:{list}} = await getuserlistapis({ deptNo: node.data.orgNo })
            return resolve(this.setnameapi(list))
        } else {
          const { data: { list: bumenlist } } = await getzhuzhijigouapi({ parentOrgNo: node.data.bizOrgNo })
          const {data:{list:qiyelist}}=await getTreeChildListApi({parentOrgNo: node.data.bizOrgNo})
          return resolve([...this.setnameapi(qiyelist),...this.setnameapi(bumenlist)])
        }
      }
    },
    // 巡视人员树点击
    async handleNode(val) {
      if(!val.userName)return
      this.$set(this.form, 'xsfzrName', val.orgName)
      this.form.xsfzrId = val.userNo
      this.$refs.renyuan.blur()
      try {
        const res = await getxunuserapi({ userNo: val.userNo })
        this.$set(this.form, 'xsfzrMobile', res.data.entity.userMobile)
      } catch (error) {
        console.log(error)
      }
    },
    //用电企业下拉
    async cahngqiye(val) {
      this.form.orgName = this.qiyelist.filter(
        (ele) => ele.bizOrgNo == val
      )[0].bizOrgName
      const res = await getchangzhanxinxiapi({ orgNo: val })
      try {
        this.$set(this.form, 'address', res.data.entity.address)
        this.$set(this.form, 'contacts', res.data.entity.contacts)
        this.$set(this.form, 'contactsMobile', res.data.entity.contactsMobile)
      } catch (error) {
        this.$set(this.form, 'address', '')
        this.$set(this.form, 'contacts', '')
        this.$set(this.form, 'contactsMobile', '')
      }
    },
    // 取消
    quxiao() {
      this.$refs.formrefs.resetFields()
      this.dialogVisible = false
      this.form = {tourContent:'临时巡视'}
      this.form.tourType = this.tourType
      this.formdata.treeData = []
      this.formdata.treeidlist = []
      this.isshow = false
    },
    toupdate(val, flag) {
      this.dialogVisible = true
      this.isshow = flag ? flag : false
      for (let keys in val) {
        if (val[keys] == 'null') {
          val[keys] = ' '
        }
      }
      this.form = { ...val }
      this.active = 2
      this.formdata.treeData = val.xscyName ? val.xscyName.split(',') : []
      this.formdata.treeidlist = val.xscyId ? val.xscyId.split(',') : []
    },
    async chushihua() {
      this.$set(this.form, 'businessType', this.yewulist[0]?.value)
      this.$set(this.form, 'tourType', this.xingzhilist[0]?.value)
      this.$set(this, 'tourType', this.xingzhilist[0]?.value)
      const loginapi = await getuserloginapi()
      this.$set(this.form, 'tbrName', loginapi.data.entity.userName)
      this.gettime()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__footer {
  text-align: center;
}
.option {
  height: auto;
}
.buzhou {
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
.form {
  // margin: 15px 0;
  padding: 15px 0;
}
.footer {
  text-align: center;
  .button {
    width: 60px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    margin-right: 10px;
  }
  .sure {
    color: #fff;
    background-color: #3b8eea;
    border: none;
  }
}
::v-deep .el-col-12 {
  margin-bottom: -15px;
}
::v-deep .el-col-24 {
  margin-bottom: -15px;
}
::v-deep .el-form-item__error{
  padding-top: 0px;
}
</style>
